<template>
  <div>
    <a-card style="padding: 2%">
      <div v-if="showType == SHOW_TYPE_ENUM.SHOW_TYPE_DETAIL">
        <h1 style="font-size: 28px">我的账户</h1>
        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
          <a-form-item label="账号名称">
            <a-input :value="user_name" disabled/>
          </a-form-item>
          <a-form-item label="用户昵称">
            <a-input :value="nick_name" disabled/>
          </a-form-item>
          <a-form-item label="邮箱">
            <a-input :value="mail" disabled/>
          </a-form-item>
          <a-form-item label="手机号">
            <a-input :value="mobile" disabled/>
          </a-form-item>
          <a-form-item label="性别">
            <a-input :value="gender" disabled/>
          </a-form-item>
          <a-form-item label="地址">
            <a-input :value="address" disabled/>
          </a-form-item>
          <a-form-item label="状态">
            <a-input :value="status" disabled/>
          </a-form-item>
          <a-form-item label="角色名称">
            <a-textarea :value="intro" disabled/>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" style="width: 140px;" @click="onModifyInfo">修改信息</a-button>
            <a-button ype="primary" style="width: 140px;margin-left: 20px;" @click="onModifyPwd">
              修改密码
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div v-if="showType == SHOW_TYPE_ENUM.SHOW_TYPE_MODIFY_INFO">
        <ModifyInfo :view-type="showType" :item="selectItem" @my-emit="callBack"></ModifyInfo>
      </div>
      <div v-if="showType == SHOW_TYPE_ENUM.SHOW_TYPE_MODIFY_PWD">
        <ModifyPwd :view-type="showType" :item="selectItem" @my-emit="callBack"></ModifyPwd>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
  import {defineComponent, onMounted, toRefs} from '@vue/runtime-core';
  import {reactive} from 'vue';
  import {message} from 'ant-design-vue';
  import {getUserInfo} from "/@/api/sys/user";
  import {SHOW_TYPE_ENUM} from "/@/enums/viewTypeEnum";
  import {CoreUtils} from "/@/utils/coreUtils";
  import ModifyInfo from './modifyInfo.vue';
  import ModifyPwd from './modifyPwd.vue';

  export default defineComponent({
    components: {
      ModifyInfo,
      ModifyPwd,
    },
    props: {},
    setup() {

      const data = reactive({
        showType: SHOW_TYPE_ENUM.SHOW_TYPE_DETAIL,
        selectItem: null,
        user_id: '',
        user_name: '',
        nick_name: '',
        mail: '',
        mobile: '',
        intro: '',
        gender: '',
        address: '',
        status: '',
        role_name: '',
      });

      const onModifyInfo = () => {
        data.showType = SHOW_TYPE_ENUM.SHOW_TYPE_MODIFY_INFO;
      };

      const onModifyPwd = () => {
        data.showType = SHOW_TYPE_ENUM.SHOW_TYPE_MODIFY_PWD;
      };

      // 查询
      const queryData = () => {
        getUserInfo().then((result: any) => {
          if (result.code == 0) {
            data.selectItem = result.data;
            data.user_id = result.data.user_id;
            data.user_name = result.data.user_name;
            data.nick_name = result.data.nick_name;
            data.mail = result.data.mail;
            data.mobile = result.data.mobile;
            data.intro = result.data.intro;
            data.gender = result.data.gender == 0 ? '男' : '女';
            data.address = result.data.address;
            data.status = result.data.status == 0 ? '正常' : '停用';
            data.role_name = result.data.role_name;
          } else {
            message.error(result.message);
          }
        });
      };

      // Emit
      const callBack = (item) => {
        CoreUtils.console_log(item);
        data.showType = SHOW_TYPE_ENUM.SHOW_TYPE_DETAIL;
        queryData();
      }

      onMounted(() => {
        queryData();
      });

      return {
        ...toRefs(data),
        SHOW_TYPE_ENUM,
        onModifyInfo,
        onModifyPwd,
        callBack,
      };
    },
  });
</script>

<style scoped></style>
